<template>
	<!-- 这是我的页面 -->
	<div>
		<div v-if="isLogin">
			<!-- 用户信息 -->
			<van-cell class="member" title="单元格" is-link center to="login">
				<template #icon>
					<van-image :src="avatar" width="80"></van-image>
				</template>

				<template #title>
					<span class="title">{{ user.name }}</span>
				</template>
			</van-cell>
			<!-- 用户可以操作功能列表 -->
			<van-cell icon="orders-o" title="我的订单" is-link :to="{ name: 'orderList' }" />
			<van-cell icon="envelop-o" title="收货地址" is-link :to="{ name: 'addressList' }" />
			<van-cell icon="point-gift-o" title="我的收藏" is-link :to="{ name: 'working' }" />
			<van-cell icon="user-o" title="个人资料" is-link :to="{ name: 'profile' }" />
			<van-cell icon="records" title="修改密码" is-link :to="{ name: 'updatePwd' }" />

			<van-cell @click="onClickLogout" icon="user-o" title="退出登录" is-link />
		</div>
		<div v-else>
			<!-- 未登录 -->
			<van-cell class="member" title="单元格" is-link center to="login">
				<template #icon>
					<van-image :src="avatar" width="80" @error="onError"></van-image>
				</template>

				<template #title>
					<span class="title">登录 / 注册</span>
				</template>
			</van-cell>
		</div>
	</div>
</template>

<script>
//1.导入封装后的接口
import { getDetailByIdAPI } from '@/api/user.js';
import { getTokenLocal, getUserLocal,removeTokenLocal} from "@/utils/auth.js"
export default {
	data() {
		return {
			isLogin: false, //是否登录
			avatar_default: require('@/assets/images/avatar_default.png'), //默认头像
			avatar: null, //用户头像，
			user: { id: null, name: null }
		};
	},

	//生命周期方法
	mounted() {
		this.isLogin = getTokenLocal() ? true : false;
		//从本地存储获取用户id name
		this.user = getUserLocal();
		this.avatar = this.avatar_default;

		if (this.isLogin) {
			//从后端取用户头像
			getDetailByIdAPI(this.user.id).then(result => {
				console.log(result);
				this.avatar = this.APIDomainName + result.data.avatar;
			});
		}
	},
	methods: {
		//点击用户退出事件
		onClickLogout() {
			removeTokenLocal();
			this.avatar = this.avatar_default;
			this.$toast('退出成功');
			this.isLogin = false;
		},
		onError() {
			console('onError 加载图片出错');
		}
	}
};
</script>

<style lang="less" scoped="scoped">
.member {
	padding: 10px;
	background: linear-gradient(90deg, #28a2ff, #ffd787);
	box-shadow: 0 0.1rem 0.25rem #f8e3c6;
}
.title {
	padding-left: 30px;
	color: #4e38fa;
	font-size: 24px;
}
</style>
